<template>
  <div class="cc" id="cc">
    <div
      class="item"
      v-for="(item, index) in waterList"
      :key="index"
      :style="
        'top:' +
        item.top +
        'px;left:' +
        item.left +
        'px;height:' +
        item.height +
        'px;background:' +
        item.background
      "
    ></div>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted } from "vue";

const divList: any[] = [
  {
    height: 300,
    background: "red",
  },
  {
    height: 400,
    background: "pink",
  },
  {
    height: 500,
    background: "blue",
  },
  {
    height: 200,
    background: "green",
  },
  {
    height: 300,
    background: "gray",
  },
  {
    height: 400,
    background: "#CC00FF",
  },
  {
    height: 200,
    background: "black",
  },
  {
    height: 100,
    background: "#996666",
  },
  {
    height: 500,
    background: "skyblue",
  },
  {
    height: 300,
    background: "#993366",
  },
  {
    height: 100,
    background: "#33FF33",
  },
  {
    height: 400,
    background: "skyblue",
  },
  {
    height: 200,
    background: "#6633CC",
  },
  {
    height: 300,
    background: "#666699",
  },
  {
    height: 300,
    background: "#66CCFF",
  },
  {
    height: 300,
    background: "skyblue",
  },
  {
    height: 200,
    background: "#CC3366",
  },
  {
    height: 200,
    background: "#CC9966",
  },
  {
    height: 200,
    background: "#FF00FF",
  },
  {
    height: 500,
    background: "#990000",
  },
  {
    height: 400,
    background: "red",
  },
  {
    height: 100,
    background: "#999966",
  },
  {
    height: 200,
    background: "#CCCC66",
  },
  {
    height: 300,
    background: "#FF33FF",
  },
  {
    height: 400,
    background: "#FFFF66",
  },
  {
    height: 200,
    background: "red",
  },
  {
    height: 100,
    background: "skyblue",
  },
  {
    height: 200,
    background: "#33CC00",
  },
  {
    height: 300,
    background: "#330033",
  },
  {
    height: 100,
    background: "#0066CC",
  },
  {
    height: 200,
    background: "skyblue",
  },
  {
    height: 100,
    background: "#006666",
  },
  {
    height: 200,
    background: "yellow",
  },
  {
    height: 300,
    background: "yellow",
  },
  {
    height: 100,
    background: "#33CCFF",
  },
  {
    height: 400,
    background: "yellow",
  },
  {
    height: 400,
    background: "yellow",
  },
  {
    height: 200,
    background: "#33FF00",
  },
  {
    height: 300,
    background: "yellow",
  },
  {
    height: 100,
    background: "green",
  },
];

const waterList = reactive<Array<any>>([]);

const init = (): void => {
  const width: number = 70;
  const windownWidth: number = (<HTMLElement>document.getElementById("cc"))
    .clientWidth;
  const column: number = Math.floor(windownWidth / width);
  const heightList: Array<any> = [];

  for (let i = 0; i < divList.length; i++) {
    if (i < column) {
      divList[i].top = 20;
      divList[i].left = i * width;
      heightList.push(divList[i].height + 20);
      waterList.push(divList[i]);
    } else {
      let current: number = heightList[0];
      let index: number = 0;
      heightList.forEach((a, b) => {
        if (a < current) {
          current = a;
          index = b;
        }
      });
      divList[i].top = current + 20;
      divList[i].left = index * width;
      heightList[index] = heightList[index] + divList[i].height + 20;
      waterList.push(divList[i]);
    }
  }
};

onMounted(() => {
  init();
});
</script>

<style scoped lang="scss">
.cc {
  width: 100%;
  position: relative;
  .item {
    width: 50px;
    position: absolute;
  }
}
</style>
